<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载3</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    ;
</style>

<body>
    <div class="box" draggable="true"></div>

    <script>
        /*
            intersectionObserver
        */

        // observer配置项
        var observerOptions = {
            threshold: .5, // 目标元素与视窗重叠的阈值（0-1）
            root: null, // 目标视窗即目标元素的父元素，如果没有提供，则默认body
        };

        // 实例化观察者对象
        var observer = new IntersectionObserver(observerCallback, observerOptions);


        // observer回调函数
        function observerCallback(entries) {
            entries.forEach(item => {
                /*
                 * item.time发生相交到相应的时间，毫秒
                 * item.rootBounds：根元素矩形区域的信息，如果没有设置根元素则返回 null，图中蓝色部分区域。
                 * item.boundingClientRect：目标元素的矩形区域的信息，图中黑色边框的区域。
                 * item.intersectionRect：目标元素与视口（或根元素）的交叉区域的信息，图中蓝色方块和粉红色方块相交的区域。
                 * item.isIntersecting：目标元素与根元素是否相交
                 * item.intersectionRatio：目标元素与视口（或根元素）的相交比例。
                 * item.target：目标元素，图中黑色边框的部分。
                 */

                // 当前元素可见
                if (item.isIntersecting) {
                    /* 要执行的操作 */
                    console.log('I am intersecting')
                }

                // 接触观察当前元素 避免不可见时候再次调用callback函数
                observer.unobserve(item.target);

            });
        };


        const box = document.getElementsByClassName('box')[0];

        observer.observe(box);
    </script>
</body>
</html>